<template>
  <div id="app">
    
    <transition name="component-fade" mode="out-in">
      <router-view></router-view>
</transition>
    <van-tabbar route placeholder v-if="$route.meta.showTab">
      <van-tabbar-item
        v-for="(item, index) in links"
        :key="index"
        replace
        :to="item.path"
        :icon="item.icon"
        >{{ item.text }}</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import { startRegister } from "@/network/index.js";
import { Tabbar, TabbarItem } from "vant";
export default {
  data() {
    return {
      links: [
        {
          path: "/Home",
          icon: "home-o",
          text: "首页",
        },
        {
          path: "/Category",
          icon: "apps-o",
          text: "分类",
        },
        {
          path: "/ShoppingCart",
          icon: "shopping-cart-o",
          text: "购物车",
        },
        {
          path: "/Profile",
          icon: "contact",
          text: "我的",
        },
      ],
    };
  },
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
};
</script>

<style lang="less">
.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}
</style>
